<template>
  <footer class="footer">
    <div class="container">
      <div class="footer-content">
        <div class="footer-section">
          <h4>游戏账号交易平台</h4>
            <i class="fa fa-gamepad text-primary text-2xl"></i>
          <p>专业的游戏账号租赁与寄售平台，为玩家提供安全、便捷的账号交易服务。</p>
        </div>
        <div class="footer-section">
          <h4>服务条款</h4>
          <ul>
            <li><a href="#">用户协议</a></li>
            <li><a href="#">隐私政策</a></li>
            <li><a href="#">免责声明</a></li>
            <li><a href="#">客服中心</a></li>
          </ul>
        </div>


        <div class="footer-section">
          <h4 class="text-lg font-medium mb-4">安全中心</h4>
          <ul class="space-y-2 text-gray-400">
            <li><a href="#">交易安全</a></li>
            <li><a href="#">账号保障</a></li>
            <li><a href="#">防骗指南</a></li>
            <li><a href="#">用户协议</a></li>
          </ul>
        </div>
        <div class="footer-section">
          <h4 class="text-lg font-medium mb-4">联系我们</h4>
          <ul class="space-y-2 text-gray-400">
            <li><i class="fa fa-envelope"></i> <a href="mailto:kefu@lingyumcn.com">kefu@lingyumcn.com</a></li>
            <li><i class="fa fa-phone"></i> <a href="tel:18229738322">18229738322</a></li>
            <li><i class="fa fa-weixin"></i> 公众号: 灵域电竞俱乐部</li>
          </ul>
        </div>
      </div>
      <div class="footer-bottom">
        <p>&copy; 2025 灵域电竞俱乐部 版权所有 | 营业执照编号：91370100MA12345678</p>
        <p class="mt-1">抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。</p>
      </div>
    </div>
  </footer>
</template>

<script setup>
// 页脚组件不需要特殊的逻辑
</script>

<style lang="scss" scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

// 页脚样式
.footer {
  background:rgb(29, 41, 57);
  color: white;
  margin-top: auto;
  
  .footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5em;
    padding: 40px 10px;
    text-align: left;
    
    .footer-section {
      h4 {
        margin-bottom: 16px;
        color: #fff;
      }
      
      p, li {
        color: #ccc;
        line-height: 1.6;
      }
      
      ul {
        list-style: none;
        padding: 0;
        margin: 0;
        
        li {
          margin-bottom: 8px;
          
          a {
            color: #ccc;
            text-decoration: none;
            
            &:hover {
              color: #1890ff;
            }
          }
        }
      }
    }
  }
  
  .footer-bottom {
    border-top: 1px solid #555;
    padding: 20px 0;
    text-align: center;
    color: #999;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .footer {
    .footer-content {
      grid-template-columns: 1fr;
      gap: 24px;
      text-align: center;
    }
  }
  
  .container {
    padding: 0 16px;
  }
}
</style> 